<template>
    <div>
        <div class="played" v-if="playList && playList[playListIndex]">
            <!-- 封面 -->
            <div class="pic" @click="demo">
                <img :src="playList[playListIndex].al ? playList[playListIndex].al.picUrl : playList[playListIndex].picUrl"
                    alt="" />
            </div>
            <!-- 歌名 -->
            <div class="name">{{ playList[playListIndex].name }}</div>

            <div class="ctl" @click="played">
                <!-- 播放 -->
                <div v-if="!show"><van-icon size="30" name="play-circle-o" /> </div>
                <!-- 暂停 -->
                <div v-else><van-icon size="30" name="pause-circle-o" /> </div>
            </div>
        </div>
        <audio ref="audio" :src="`https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3`"></audio>
        <!-- 歌词部分 -->
        <div>
            <van-popup :value="isShow" position="bottom" :style="{ height: '100%' }">
                <div>
                    <MusicLyric :playlist = 'playList[playListIndex]' 
                    :show='show'
                    />
                </div>
            </van-popup>
        </div>
    </div>
</template>
  
<script>
import { mapState, mapMutations } from 'vuex';

export default {
    data() {
        return {};
    },
    //控件数据发生变化
    updated(){
        this.$store.dispatch('getLyricData',this.playList[this.playListIndex].id)
    },
    computed: {
        ...mapState(['playList', 'playListIndex', 'show', 'isShow']),
    },
    methods: {
        demo() {
            this.updataIsshow()
        },
        ...mapMutations(['updataIsshow', 'updataShow','updatacurrent']),
        //点击播放
        played() {
            //获取audio标签
            let a = this.$refs.audio;
            //如果在暂停状态下，点击播放，更改图标
            if (a.paused) {
                a.play()
                this.updataShow(true)
               this.getcurrentTime()
            } else {
                a.pause()
                this.updataShow(false)
                this.getcurrentTime()
            }
        },
        //获取播放时间
        getcurrentTime() {
            setInterval(() =>{
                this.updatacurrent(this.$refs.audio.currentTime)
            },100);
        },
    }
};
</script>
      <div class="played" v-if="playList && playList[playListIndex]">
        <div class="pic" @click="demo">
          <img
            :src="playList[playListIndex].al ? playList[playListIndex].al.picUrl : playList[playListIndex].picUrl"
            alt=""
          />
        </div>
  
        <div class="name">{{ playList[playListIndex].name }}</div>
        <div class="ctl" @click="played">
          <div v-if="!show"><van-icon size="30" name="play-circle-o" /> </div>
          <div v-else><van-icon size="30" name="pause-circle-o" /> </div>
        </div>
      </div>
      <audio
        ref="audio"
        :src="`https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3`" 
      ></audio>

      <div>
        <van-popup :value="isShow" position="bottom" :style="{ height:'100%'}">
        <div>
          <MusicLyric 
          :playlist = 'playList[playListIndex]'
          :show="show"
          />
        </div>
        </van-popup>
      </div>
    </div>
  </template>
  
  <script>
  import { mapState, mapMutations } from 'vuex';
  
  export default {
    data() {
      return {

      };
    },
    updated(){
      this.$store.dispatch('getLyricData',this.playList[this.playListIndex].id)
    },
    computed: {
      ...mapState(['playList', 'playListIndex','show','isShow']),
    },
    methods: {
      demo() {
        this.updataIsshow()
      },
      ...mapMutations(['updataIsshow','updataShow','updatacurrent']),

      played() {
        let a = this.$refs.audio;
        if(a.paused){
          a.play()
          this.updataShow(true)
          this.getcurrentTime()
        }else{
          a.pause()
          this.updataShow(false)
          this.getcurrentTime()
        }
      },
      getcurrentTime() {
        setInterval(() =>{
          this.updatacurrent(this.$refs.audio.currentTime)
        },100);
      }
    }
  };
  </script>
  

<style lang="less" scoped>
.played {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: pink;
    align-items: center;
    justify-content: space-between;
    Z-index: 4;
    padding: 0 10px;
    box-sizing: border-box;

    .name {
        margin-left: -180px;
    }

    .ctl {
        width: 30px;
    }

    img {
        width: 100%;
    }

    .pic {
        width: 40px;
        img {
            width: 100%;
            border-radius: 50%;
        }
    }
}
</style>